<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import { useECharts, useDark } from "@pureadmin/utils";
import { getSystemPlatformInfo, SystemPlatformInfo } from "@/api/auth";
import { getLogCount } from "@/api/system/requestLog";
import { textValue } from "./js/index";
import { Search, Refresh } from "@element-plus/icons-vue";
import type { FormInstance } from "element-plus";
const defValue = (): SystemPlatformInfo => {
  return {
    frameworkDescription: "",
    osDescription: "",
    osVersion: "",
    osArchitecture: "",
    machineName: "",
    version: ""
  };
};
const systemPlatformInfo = ref<SystemPlatformInfo>(defValue());
const chartRef = ref();
// 兼容dark主题
const { isDark } = useDark();
const { setOptions } = useECharts(chartRef, {
  theme: isDark.value ? "dark" : "default"
});
const chartOptions = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  yAxis: {
    type: "value"
  }
};
const showRequestCount = () => {
  // getLogCount({}).then((result: any) => {
  //   const aa = { ...chartOptions, ...result };
  //   setOptions(aa);
  // });
};

onMounted(() => {
  // getSystemPlatformInfo().then((result: SystemPlatformInfo) => {
  //   systemPlatformInfo.value = result;
  // });
  showRequestCount();
});
// interface textValue {
//   value: string;
// }
const options = ref([
  {
    value: "Option1",
    label: "Option1"
  },
  {
    value: "Option2",
    label: "Option2"
  },
  {
    value: "Option3",
    label: "Option3"
  },
  {
    value: "Option4",
    label: "Option4"
  },
  {
    value: "Option5",
    label: "Option5"
  }
]);
const formdata = reactive<textValue>({
  value: "",
  value2: "",
  value3: []
});
const ruleFormRef = ref<FormInstance>();
// const test = ref<textValue>({
//   value: "123123",
//   value2: "15345",
//   value3: "15345"
// });

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
const radio2 = ref<string>("全部");
interface rlist {
  value: string | number;
  label: string | number;
}

const radiolist = ref([] as rlist[]);
radiolist.value = [
  {
    value: "全部",
    label: "全部"
  },
  {
    value: "今日",
    label: "今日"
  },
  {
    value: "昨日",
    label: "昨日"
  },
  {
    value: "一个月",
    label: "一个月"
  }
];
interface linklist {
  title: string,
  number: string | number,
  url: string,
  id: string | number
}
const link = ref([] as linklist[]);
link.value = [{
  title: '商户入驻待审核',
  number: '0',
  url: '',
  id: 1
},{
  title: '商户协议待审核',
  number: '0',
  url: '',
  id: 1
},{
  title: '开票待审核',
  number: '0',
  url: '',
  id: 1
},{
  title: '开票待完成',
  number: '0',
  url: '',
  id: 1
},{
  title: '开票待上传',
  number: '0',
  url: '',
  id: 1
},{
  title: '项目模板待审核',
  number: '0',
  url: '',
  id: 1
},{
  title: '充值待审核',
  number: '0',
  url: '',
  id: 1
},{
  title: '退款待审核',
  number: '0',
  url: '',
  id: 1
}]
</script>

<template>
  <div class="p-5">
    <div>
      <el-form ref="ruleFormRef" :inline="true" :model="formdata">
        <el-form-item prop="value">
          <el-select
            clearable
            v-model="formdata.value"
            placeholder="请选择商户名称"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="value2">
          <el-select
            clearable
            v-model="formdata.value2"
            placeholder="请选择税源地"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="value3">
          <el-date-picker
            v-model="formdata.value3"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button class="ml-2" type="primary" :icon="Search">搜索</el-button>
          <el-button
            class="ml-2"
            @click="resetForm(ruleFormRef)"
            :icon="Refresh"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-card :shadow="`never`">
      <!-- <template #header> 系统信息 </template> -->
      <div>
        <el-radio-group v-model="radio2">
          <el-radio-button
            v-for="(item, index) in radiolist"
            :index="index"
            :label="item.label"
            :value="item.value"
          />
        </el-radio-group>
        <div class="mt-3">
          <el-row>
            <el-col :span="10">
              <div>
                <div class="label">经营数据</div>
                <el-row>
                  <el-col :span="6">
                    <div>
                      <div class="onetitle">充值金额</div>
                      <div class="number">0.00元</div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div>
                      <div class="onetitle">下发金额</div>
                      <div class="number">0.00元</div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div>
                      <div class="onetitle">服务费</div>
                      <div class="number">0.00元</div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="1">
              <div class="line"></div>
            </el-col>
            <el-col :span="5">
              <div>
                <div class="label">税务数据</div>
                <el-row>
                  <el-col :span="12">
                    <div>
                      <div class="onetitle">开票总额</div>
                      <div class="number">0.00元</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div>
                      <div class="onetitle">纳税总额</div>
                      <div class="number">0.00元</div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="1">
              <div class="line"></div>
            </el-col>
            <el-col :span="7">
              <div>
                <div class="label">合作数据</div>
                <el-row>
                  <el-col :span="8">
                    <div>
                      <div class="onetitle">合作商户</div>
                      <div class="number">0.00元</div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div>
                      <div class="onetitle">商户协议</div>
                      <div class="number">0.00元</div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div>
                      <div class="onetitle">自由职业者人数</div>
                      <div class="number">0.00元</div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
    <el-card :shadow="`never`" class="table-card">
      <!-- <template #header>系统访问曲线</template>
      <div ref="chartRef" style="width: 100%; height: 35vh" /> -->
      <el-row>
        <el-col :span="6">
          <div>
            <div class="label">待办事项</div>
            <div class="">
              <div v-for="(item,index) in link" :key="index" class="l-one my-2 flex justify-between items-center">
                <div class="l-title">
                  {{item.title}}（{{item.number}}）
                </div>
                <el-button type="primary" link>
                  点击查看
                </el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<style scoped>
.line {
  height: 100%;
  width: 1px;
  border: 1px dashed #dedede;
}
.label {
  margin-bottom: 20px;
  width: 90px;
  height: 30px;
  font-size: 22px;
  font-family:
    PingFangSC-Semibold,
    PingFang SC;
  font-weight: 600;
  color: #333;
  line-height: 30px;
}
.onetitle {
  margin-bottom: 10px;
  text-align: left;
  font-size: 16px;
  color: #999;
}
.number {
  font-size: 20px;
  color: #333;
}
.l-title{
  font-size: 13px;
  color: #333;
}
</style>
